<template>
    <div class="main-content-right">
        <div class="order-show">
            <div class="order-title-big">
                <div class="order-title">
                    <div class="order-title-name">我的订单</div>
                    <div class="tabbar">
                        <div class="tabbar-left">购买课程</div>
                        <div class="tabbar-right">
                            <div class="tabber-right-item">全部</div>
                            <div class="tabber-right-item">状态</div>
                            <div class="tabber-right-item">操作</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-content">
                <div
                    class="order-content-item"
                    v-for="(item, index) in 5"
                    :key="index"
                >
                    <div class="order-content-item-top">
                        <div class="order-number">订单号：166343434</div>
                        <div class="order-time">下单时间：2020-09-09</div>
                    </div>
                    <div class="order-content-item-bottom">
                        <div class="tabbar-left-ct">小蘑菇英语应用</div>
                        <div class="tabbar-right-ct">
                            <div class="tabber-right-item-ct1">￥999</div>
                            <div class="tabber-right-item-ct2">报名成功</div>
                            <div class="tabber-right-item-ct3">取消报名</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 24px 0px;
    background: #fff;
    box-sizing: border-box;
    .title {
        font-size: 20px;
    }
}
.main-content-right {
    .order-title {
        height: 104px;
        display: flex;
        margin: 0px 24px;
        flex-direction: column;
        justify-content: space-around;
    }
}
.order-title-big {
    width: 100%;
    height: 104px;
    box-shadow: 0px 5px 5px -5px #dadfe6;
}
.order-title {
    .order-title-name {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
    }
    .tabbar {
        color: #9ea4b0;
        display: flex;
    }
}
.tabbar-left {
    width: 50%;
}
.tabbar-right {
    width: 50%;
    display: flex;
}
.tabber-right-item {
    flex: 1;
    text-align: center;
}
.order-content-item {
    height: 149px;
    margin: 24px;
    border: 1px solid #dadfe6;
}
.order-content-item-top {
    height: 44px;
    width: 100%;
    display: flex;
    background: #f5fcff;
    align-items: center;
    .order-number {
        color: #9ea4b0;
        padding: 0px 20px;
        border-right: 1px solid #9ea4b0;
    }
    .order-time {
        color: #9ea4b0;
        padding: 0px 20px;
    }
}
.order-content-item-bottom {
    height: 105px;
    width: 100%;
    display: flex;
}
.tabbar-left-ct {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #2d3440;
}
.tabbar-right-ct {
    width: 50%;
    display: flex;
}
.tabber-right-item-ct1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #f25427;
    border-left: 1px solid #dadfe6;
}
.tabber-right-item-ct2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2d3440;
    border-left: 1px solid #dadfe6;
}
.tabber-right-item-ct3 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2d3440;
    border-left: 1px solid #dadfe6;
    cursor: pointer;
}
</style>
